<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 80px;
            height: 30px;
        }

        input {
            width: 200px;

        }

        div {
            width: 400px;
            height: 200px;
            border: 1px solid black;
            overflow-x: auto;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <p><span> 姓名：</span><input type="text" name="" id="name1"></p>
    <p><span> 年龄：</span><input type="text" name="" id="age1"></p>
    <p><span> 学号：</span><input type="text" name="" id="studentId1"></p>
    <p><span> 身份证号：</span><input type="text" name="" id="idCard1"></p>
    <p><span> 性别：</span><input type="text" name="" id="sex1"></p>
    <p><span> 兴趣爱好: </span><input type="text" name="" id="professional1"></p>
    <p><span> 自我介绍：</span><button id="btn">生成</button></p>
    <div id="introduce1"></div>

    <script>
        var obj = {
            // name: "豪哥哥哟哟哟",
            // age: 18,
            // studentId: 2003778,
            // idCard: 7788778,
            // sex: '男生',
            // professional: 'computer',
            // introduce: "我叫豪哥哥哟哟哟,我是一个大四的学<br>生,我非常喜欢敲代码和打游戏",
            fun: function () {
                // name1.value = this.name
                // age1.value = this.age
                // studentId1.value = this.studentId
                // idCard1.value = this.idCard
                // sex1.value = this.sex
                // professional1.value = this.professional

                // 设置btn点击事件
                btn.onclick = function () {
                    /*    if (name1.value = '', age1.value = '',
                        studentId1.value = '',
                        idCard1.value = '',
                        sex1.value = '',
                        professional1.value = '') {
                        alert('所有文本框为空，请输入内容')
                    }
 */
                    // 点击事件触发后给div输入所有文本框的内容
                    introduce1.innerHTML = "大家好，我的名字叫" + name1.value + ",我今年年龄" + age1.value + '岁,' +
                        "我的学号是" + studentId1.value + ",我的身份证号是" + idCard1.value + ",我性别是" + sex1.value +
                        ",我的兴趣爱好是" + professional1.value + '。';


                    // 清空所有文本框中的内容
                    name1.value = ''
                    age1.value = ''
                    studentId1.value = ''
                    idCard1.value = ''
                    sex1.value = ''
                    professional1.value = ''
                }

                // document.write("<br>姓名:" + this.name + "<br>年龄:" + this.age + "<br>学号:" + this.idCard +
                //     "<br>性别：" + this.sex + "<br>兴趣爱好" + this.professional + "<br>自我介绍:" + this.introduce);

            }
        }
        obj.fun();
    </script>
</body>

</html>